<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
    <!-- 左侧放大镜容器 -->
	<div class="small"> 
		<!-- 贴膜 -->
		<div class="wrap"></div>
		<!-- 左侧放大镜图片 -->
		<img src="images/timg.jpg" alt="">
		<!-- 小盒子 -->
		<span class="grayBox"></span>
    </div>
    <!-- 按钮切换图片 -->
    <div class="choice-btn">
        <img src="images/timg.jpg" alt="">
        <img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
</div>
	<!-- 大图容器 -->
	<div class="big">
		<!-- 大图图片 -->
		<img src="images/timg.jpg" alt="">
	</div>
</body>


<script>
    function Fangdajing(){
        // 大盒子
        this.big=document.querySelector(".big")
        // 小盒子
        this.small=document.querySelector(".small")
        // 放大镜框
        this.grayBox=document.querySelector(".grayBox")
        	// 大图片
		this.big_img = document.querySelector(".big img");
        // 小图 ;
		this.small_img = document.querySelector(".small img");
        // 性能优化写法
        this.square_size = {
			width  : parseInt(getComputedStyle(this.grayBox).width),
			height : parseInt(getComputedStyle(this.grayBox).height)
		}
		// 获取小盒子宽高;
		this.small_size = {
			width : this.small.offsetWidth,
			height : this.small.offsetHeight,
		}
		// 获取大容器的宽高;
		this.big_size = {
			width  : parseInt(getComputedStyle(this.big).width),
			height : parseInt(getComputedStyle(this.big).height)
		}
		// 大图片的宽高;
		this.big_img_size = {
			width  : parseInt(getComputedStyle(this.big_img).width),
			height : parseInt(getComputedStyle(this.big_img).height)
		}
        // 找到按钮 
		this.index = 0;
		this.btns = document.querySelectorAll(".choice-btn img");
        this.bindEvent()
    }

    Fangdajing.prototype.bindEvent=function(){
        // 记录指向原型
            var self=this
            // 鼠标移入
        this.small.onmouseover=function(){
                self.big.style.display="block";
                self.grayBox.style.display="block";

        }
        // 鼠标移出
        this.small.onmouseout=function(){
                self.big.style.display="none";
                self.grayBox.style.display="none";
        }
        // 鼠标移动
        this.small.onmousemove=function(e){
            var e=e || event
            var x=e.offsetX-50
            var y=e.offsetY-50
            // 最大位置坐标
            var maxLeft=self.small_size.width - self.square_size.width-8
            var maxTop=self.small_size.height-self.square_size.height-8
            // 边界值判断
            if(x>maxLeft){
                 x=maxLeft
            }else if(x<0){
                x=0
            }
            if(y>maxTop){
                 y=maxTop
            }else if(y<0){
                y=0
            }
            // 数据渲染
            self.grayBox.style.left=x+"px"
            self.grayBox.style.top=y+"px"
           
        //    计算位置百分比
            var propleft=(x/maxLeft).toFixed(2)
            var proptop=(y/maxTop).toFixed(2)
            console.log(self.big_img_size)
            // 计算最大位移坐标
            var bigleft=self.big_img_size.width - self.big_size.width
            var bigtop=self.big_img_size.height - self.big_size.height

            // 计算距离
            self.big_img.style.left=-bigleft*propleft+"px"
            self.big_img.style.top=-bigtop*proptop+"px"
        }

        // 切换按钮事件
        for(let i=0;i<this.btns.length;i++){
            this.btns[i].index = i;
            this.btns[i].onmouseover=function(){
                self.index=this.index
                self.small_img.src = this.src;
				self.big_img.src= this.src;
            }
        }

    }
    var fn=new Fangdajing()
</script>
</html>